feat(props): interpolate placeholders in bound props - #490

Correctness · 2.syntax/2.components.md:348 · in Docs Website

When resolveAttributes gets :title="Hi {{ data.x" with parseJson: true, JSON parsing fails, path lookup returns undefined, and framework renderers drop the prop.

Fix: Qualify this bullet by renderer mode: with parseJson: true, malformed : values fall through to path lookup and become undefined; only default mode preserves them.

Component view — Core Attribute Resolution

Core interpolation engine, stringifier state, and attribute resolution.

Component view — UI Framework Adapters

UI adapters across Vue, React, Svelte, and Angular passing props to the core renderer.

• Run npx skills add coldteadotai/pr-lens, then tell your coding agent: "Diagram the change you just made with PR Lens and attach it to the pull request."
• Run npx @coldtea/pr-lens-cli analyze --base origin/main on a branch, then npx @coldtea/pr-lens-cli render .pr-lens/graph.json. Same lenses, your own model key, before the pull request exists
• Click the link under each diagram to open it on a canvas you can zoom, pan and step through
• Open a diagram on the canvas, then press W or click play to walk through the change one step at a time
• The CLI's render reads .github/pr-lens.yml and applies your renames, exclusions and lane pins at draw time
• Set github.comment.collapsed: true in .github/pr-lens.yml to fold the comment behind one View architecture and data flow row. Drawing still runs as before
• Set github.draw: on-demand in .github/pr-lens.yml and PR Lens stops drawing pull requests on its own. Comment @pr-lens draw on a pull request when you want that one drawn
• Add .github/workflows/pr-lens.yml with coldteadotai/pr-lens/packages/action@v0 and your model provider's key as its api-key to run PR Lens from your own CI. Any /chat/completions endpoint works
• After a push, tick Redraw to draw the latest commit
• Switch GitHub to dark mode and the diagrams follow. The moving dots are this pull request's data in motion

• X
• Bluesky
• Mastodon
• Reddit
• LinkedIn

The change adds Binding-plugin interpolation for templates in colon-prefixed props. It adds template parsing, binding metadata, prop and URL validation, and interpolation in stringification. Tests, specifications, documentation, and examples cover behavior across renderers.

Changes: Bound component props

Layer / File(s)	Summary
Template grammar and URL validation packages/comark/src/internal/template.ts, packages/comark/src/internal/props-validation.ts, packages/comark/test/interpolate.test.ts, packages/comark/test/props-validation.test.ts	Adds parsing for `{{ path
Binding-plugin template marking packages/comark/src/types.ts, packages/comark/src/plugins/binding.ts, packages/comark/test/plugins/binding.test.ts	The binding plugin marks elements that contain well-formed templates in colon-prefixed attributes. Tests cover marking, disabled-plugin behavior, nested elements, and metadata serialization.
Binding and prop resolution packages/comark/src/internal/stringify/interpolate.ts, packages/comark/src/internal/stringify/attributes.ts, packages/comark/test/resolve-attributes.test.ts, packages/comark/test/dos.test.ts	Stringification resolves marked templates, sanitizes inserted values, and omits unresolved or rejected values. Tests cover defaults, validation, repeated resolution, and input limits.
Renderer coverage and examples packages/comark-ansi/test/*, packages/comark-html/test/*, packages/comark-react/test/*, packages/comark-svelte/test/*, packages/comark-vue/test/*, packages/comark/SPEC/COMARK/*, docs/content/2.syntax/2.components.md, docs/content/4.plugins/1.built-in/*, examples/3.plugins/vue-vite-binding/src/App.vue, AGENTS.md	Renderer tests cover interpolation, rejected URLs, unresolved props, and Vue reactivity. Specifications, documentation, and examples describe the syntax and resulting output.

Priority: ⬇️ Low

Estimated code review effort: 4 (Complex) | ~45 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant MarkdownParser
  participant BindingPlugin
  participant Stringifier
  participant Renderer
  MarkdownParser->>BindingPlugin: Parsed tree nodes
  BindingPlugin->>BindingPlugin: Mark templated colon-prefixed props
  BindingPlugin->>Stringifier: Marked tree
  Stringifier->>Stringifier: Interpolate and validate prop values
  Stringifier->>Renderer: Resolved props

Loading

When the security plugin is not enabled, template data can send interpolated link props to a different host. Examples are https://trusted.example{{ slug }} and https:/{{ path }}. Extend the render-time host check to explicit-scheme prefixes before merging.

Pre-merge checks: 4 · 1

Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 57.14% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 28 functions across 28 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

Passed checks: 4 passed

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely describes the main change: interpolating placeholders in bound props.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

🛠️ Fix failing CI checks: 💡

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Create a new PR

• X
• Mastodon
• Reddit
• LinkedIn

 FAIL  test/bundle.test.ts > package bundle size > published size of each package
Error: Snapshot `package bundle size > published size of each package 1` mismatched

- Expected
+ Received

@@ -4,7 +4,7 @@
    "@comark/html": "16.5k (58 files)",
    "@comark/nuxt": "11.9k (58 files)",
    "@comark/react": "38.5k (76 files)",
    "@comark/svelte": "46.5k (84 files)",
    "@comark/vue": "56.2k (80 files)",
-   "comark": "385k (152 files)",
+   "comark": "394k (156 files)",
  }

 ❯ test/bundle.test.ts:61:20
     59|     }
     60|
     61|     expect(report).toMatchInlineSnapshot(`
       |                    ^
     62|       {
     63|         "@comark/angular": "56.2k (72 files)",

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

Full CI log

System calls cannot be consistently instrumented, so they are not included in the measure, which understates the real cost. Please switch to the Walltime instrument to accurately measure system calls.

Measurement and system calls

• small document

Some benchmarks with significant performance changes were compared across different runtime environments,
which may affect the accuracy of the results.

Open the report in CodSpeed to investigate